<template>
	<scroll-view scroll-y class="park-detail-container">
		<!-- Banner轮播 -->
		<BannerSwiper :banners="banners" @change="onBannerChange" @loaded="onBannerLoaded" @error="onBannerError" />
		<!-- 园区介绍 -->

		<uni-card spacing="0" padding="20rpx" margin="20rpx">
			<view class="intro-header">
				<view class="intro-title">
					<text class="park-name">{{ park.parkName }}</text>
					<div v-if="park.rentalPrice" class="park-price">¥{{ park.rentalPrice }}元/m²/天
						<span class="park-price-tip">起(具体面议)</span>
					</div>
					<div v-else class="park-price" style="opacity:0">¥- 元/m²/天</div>
				</view>
				<view class="intro-tags">
					<view v-for="(tag) in park.parkTags" :key="tag.tagId" class="intro-tag">
						{{ tag.tagName }}
					</view>
				</view>
			</view>
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row1.png" class="addr-icon"  style="width: 18rpx;height: 23rpx;"/>
				<text class="card-title">园区介绍</text>
			</view>
			<view class="intro-block-content">
				{{ park.parkDescription || '暂无介绍' }}
			</view>

			<view class="metrics-grid metrics-grid-large">
				<view class="metric-item metric-item-large">
					<view class="metric-label">总占地面积</view>
					<view class="metric-value metric-value-large">{{ formatArea(park.totalArea) }}</view>
				</view>
				<view class="metric-item metric-item-large">
					<view class="metric-label">建筑面积</view>
					<view class="metric-value metric-value-large">{{ formatArea(park.buildingArea) }}</view>
				</view>
				<view class="metric-item metric-item-large">
					<view class="metric-label">可租面积</view>
					<view class="metric-value metric-value-large">{{ formatArea(park.rentedArea) }}</view>
				</view>
			</view>
		</uni-card>

		<!-- 仓库类型 -->
		<uni-card v-if="this.park.warehouseTypes && this.park.warehouseTypes.length > 0" spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row2.png" class="addr-icon" style="width: 24rpx;height: 24rpx;"/>
				<text class="card-title">库房类型</text>
			</view>

			<view class="type-grid">
				<view v-if="this.park.warehouseTypes" v-for="(item, idx) in this.park.warehouseTypes" :key="item.typeId"
					class="type-item">
					<view class="type-icon-box">
						<view class="type-icon-inner">
							<image :src="item.typeImage" class="type-icon" />
						</view>
					</view>
					<view class="type-name">{{ item.typeName }}</view>
				</view>
			</view>
		</uni-card>

		<!-- 硬件配置 -->
		<uni-card v-if="this.park.hardwareTypes && this.park.hardwareTypes.length > 0" spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row3.png" class="addr-icon" style="width: 29rpx;height: 29rpx;"/>
				<text class="card-title">硬件配置</text>
			</view>
			<view class="specs-grid">
				<view v-if="platformHeightText" class="spec-item">
					<view class="spec-icon-box">
						<view class="spec-icon-inner">
							<image class="spec-icon" src="/static/assets/park/park-icon-fheight.png" />
						</view>
					</view>
					<view class="spec-text">
						<view class="spec-label">月台高度</view>
						<view class="spec-value">{{ platformHeightText }}</view>
					</view>
				</view>
				<!-- <view v-if="floorHeightText" class="spec-item">
					<view class="spec-icon-box">
						<view class="spec-icon-inner">
							<image class="spec-icon" src="/static/assets/park/park-icon-fheight.png" />
						</view>
					</view>
					<view class="spec-text">
						<view class="spec-label">层高</view>
						<view class="spec-value">{{ floorHeightText }}</view>
					</view>
				</view>
				<view v-if="loadCapacityText" class="spec-item">
					<view class="spec-icon-box">
						<view class="spec-icon-inner">
							<image class="spec-icon" src="/static/assets/park/park-icon-rarea.png" />
						</view>
					</view>
					<view class="spec-text">
						<view class="spec-label">承重</view>
						<view class="spec-value">{{ loadCapacityText }}</view>
					</view>
				</view>
				<view v-if="doorText" class="spec-item">
					<view class="spec-icon-box">
						<view class="spec-icon-inner">
							<image class="spec-icon" src="/static/assets/park/park-icon-rrate.png" />
						</view>
					</view>
					<view class="spec-text">
						<view class="spec-label">电动提升门</view>
						<view class="spec-value">{{ doorText }}</view>
					</view>
				</view> -->
			</view>
		</uni-card>

		<!-- 园区地址 -->
		<uni-card  spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row5.png" class="addr-icon" style="width: 18rpx;height: 25rpx;"/>
				<text class="card-title">园区地址</text>
			</view>
			<view v-if="latitude && longitude" class="map-container">
				<map :latitude="latitude" :longitude="longitude" :markers="markers" class="map"></map>
			</view>
			<view class="address-text">{{ fullAddress }}</view>
		</uni-card>

		<!-- 可提供服务 -->
		<uni-card v-if="this.park.parkServices && this.park.parkServices.length > 0" spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row6.png" class="addr-icon" style="width: 22rpx;height: 22rpx;"/>
				<text class="card-title">可提供服务</text>
			</view>
			<view class="service-tags">
				<view class="service-tag" v-for="(srv, i) in park.parkServices" :key="i">{{ srv.serviceName }}</view>
			</view>
		</uni-card>

		<!-- 招租信息 -->
		<uni-card spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-row7.png" class="addr-icon" style="width: 22rpx;height: 22rpx;"/>
				<text class="card-title">招租信息</text>
			</view>
			<view class="contact-card">
				<view class="contact-top">
					<view class="contact-avatar">
						<image src="/static/assets/park/park-defauter-avatar.png" style="width: 100rpx;height: 100rpx;"/>
					</view>
					<view class="contact-right">
						<view class="contact-name">{{ park.manager || '' }}</view>
						<view class="contact-name">招商负责人</view>
					</view>
				</view>

				<view class="contact-bottom">
					<view class="contact-row">
						<text class="contact-label">电话：</text>
						<text>{{ contact.phone || '-' }}</text>
					</view>
					<view class="contact-row">
						<text class="contact-label">邮箱：</text>
						<text>{{ contact.email || '-' }}</text>
					</view>
					<view class="contact-row">
						<text class="contact-label">地址：</text>
						<text>{{ fullAddress }}</text>
					</view>
				</view>
			</view>
		</uni-card>
	<!-- 推荐仓库 -->
		<uni-card v-if="recommendWarehouses && recommendWarehouses.length > 0" spacing="0" padding="20rpx" margin="20rpx">
			<view class="card-header">
				<image src="/static/assets/parkInfo/park-info-isrecomment.png" class="addr-icon" style="width: 22rpx;height: 22rpx;"/>
				<text class="card-title">推荐仓库</text>
			</view>
			<scroll-view scroll-x="true" class="recommend-scroll" show-scrollbar="false">
				<view class="recommend-list">
					<view class="recommend-item" v-for="(item, i) in recommendWarehouses" :key="item.warehouseId || i" @tap="viewWarehouseDetail(item)">
						<image :src="item.thumbnailUrl" class="recommend-img" mode="aspectFill" />
						<view class="recommend-name">{{ item.warehouseName || item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</uni-card>
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-btn" @tap="sharePoster">
				<image src="/static/assets/sourceInfo/source-action-share.png" style="width: 32rpx;height: 32rpx; margin-right: 10rpx;"/>
				分享海报
			</view>
			<view class="action-btn" @tap="viewWarehouses">
				<image src="/static/assets/parkInfo/park-info-bottom-source.png" style="width: 32rpx;height: 32rpx; margin-right: 10rpx;"/>
				查看仓库
			</view>
			<view class="action-btn primary" @tap="contactUs">
				<image src="/static/assets/sourceInfo/source-bottom-phone.png" style="width: 32rpx;height: 32rpx; margin-right: 10rpx;"/>
				联系我们
			</view>
		</view>
	
		<!-- 海报弹窗 -->
		<PosterModal 
			:visible="showPosterModal"
			type="park" :data="park"
			@close="showPosterModal = false"
			@book="handleBookFromPoster"
			@saved="handlePosterSaved"
		/>
	</scroll-view>
</template>

<script>
import { API } from '@/utils/api.js'
import { processImageUrls } from '@/utils/url-helper.js'
import BannerSwiper from '@/components/BannerSwiper.vue'
import PosterModal from '@/components/PosterModal.vue'
export default {
			data() {
			return {
				parkId: '',
				park: {},
				latitude: '',
				longitude: '',
				markers: [],
				banners: [],
				bannerCurrentIndex: 0,
				recommendWarehouses: [], // 推荐仓库列表
				showPosterModal: false, // 控制海报弹窗显示
			}
		},
	components: {
		BannerSwiper,
		PosterModal
	},
	computed: {
		rentableArea() {
			const total = Number(this.park.totalArea || 0)
			const rented = Number(this.park.rentedArea || 0)
			const rentable = Number(this.park.rentableArea || (total - rented))
			return rentable > 0 ? rentable : 0
		},
		// typeNames() {
		// 	const list = this.park.warehouseTypes || []
		// 	if (Array.isArray(list)) {
		// 		list = processImageUrls(list);
		// 		return list.map(t => t.typeName || t.name).filter(Boolean)
		// 	}
		// 	return []
		// },
		services() {
			const raw = this.park.services || this.park.serviceList || this.park.availableServices || []
			if (Array.isArray(raw)) {
				return raw.map(s => typeof s === 'string' ? s : (s.name || s.title || s.label)).filter(Boolean)
			}
			if (typeof raw === 'string') {
				return raw.split(/[,，]/).map(s => s.trim()).filter(Boolean)
			}
			return []
		},
		contact() {
			return {
				name: this.park.contactName || '',
				phone: this.park.contactPhone || '',
				email: this.park.contactEmail || ''
			}
		},
		platformHeightText() {
			return this.park.platformHeight || ''
		},
		floorHeightText() {
			return this.park.floorHeight || ''
		},
		loadCapacityText() {
			return this.park.loadCapacity || ''
		},
		doorText() {
			const val = this.park.electricLiftDoor
			if (val === true || val === 1 || val === '1' || val === '是') return '有'
			if (val === false || val === 0 || val === '0' || val === '否') return '无'
			return this.park.doorType || ''
		},
		fullAddress() {
			return this.park.location || '—'
		}
	},
	async onLoad(query) {
		this.parkId = query?.parkId || ''
		this.bannerPages = query?.bannerPages || ''
		await this.fetchParkDetail()
		// this.fetchBanners(); // 新增：加载banner
		await this.fetchRecommendWarehouses(); // 新增：加载推荐仓库
	},
	methods: {
		onShareAppMessage(res) {
		  console.log("onShareAppMessage", res);
		  return {
		    title: '百联物流',
		    path: '/pages/parkMap/parkDetail?parkId=' + this.parkId + '&bannerPages=' + (this.bannerPages || ''),
		    imageUrl: '/static/sourceInfo/source-bottom-share.png'
		  }
		},
		onShareTimeline(res) {
		  console.log("onShareTimeline", res);
		},
		async fetchParkDetail() {
			if (!this.parkId) return
			try {
				const res = await API.park.getDetail(this.parkId)
				const data = res?.data || res || {}
				const processed = processImageUrls ? processImageUrls(data) : data
				this.park = processed
				console.log("this.park.warehouseTypes1", this.park.warehouseTypes);
				this.park.warehouseTypes = processImageUrls(this.park.warehouseTypes);
				console.log("this.park.warehouseTypes2", this.park.warehouseTypes);
				this.fetchBanners({bannerPage: this.park.bannerPage});
				// 定位
				const lat = Number(processed.latitude )
				const lng = Number(processed.longitude)
				this.longitude = lat
				this.latitude = lng
				console.log('lat--', lat)
				console.log('lng--',lng)
				this.markers = [
					{ id: processed.parkId || processed.id || 1, latitude: this.latitude, longitude: this.longitude, width: 30, height: 30 }
				]
			} catch (e) {
				console.error('获取园区详情失败', e)
			}
		},
		async fetchBanners(bannerPage) {
			try {
				const res = await API.banner.getList({ bannerPage: bannerPage });
				console.log("res", res);
				this.banners = processImageUrls(res)
				console.log("this.banners", this.banners);
			} catch (e) {
				console.error('获取banner失败', e);
				this.banners = [];
			}
		},
		
		// 获取园区推荐仓库
		async fetchRecommendWarehouses() {
			if (!this.parkId) return;
			try {
				const res = await API.park.getRecommendWarehouses(this.parkId, {
					page: 1,
					size: 10 // 限制显示数量
				});				
				if (res) {
					this.recommendWarehouses = processImageUrls(res)
					this.recommendWarehouses.forEach(item => {
						if(item.vrLink && item.vrLink.length > 0){
							item.warehouseTags = [{
								tagName: 'VR看仓',
								tagImage: '/static/assets/home/home-icon-vr.png',
								tagId: -2
							},...item.warehouseTags];
						}
						if(item.isRecommend){
							item.warehouseTags = [{
								tagName: '推荐',
								tagImage: '/static/assets/home/home-isRecommend.png',
								tagId: -1
							},...item.warehouseTags];
						}
					});
				} 
				console.log("this.recommendWarehouses", this.recommendWarehouses);
			} catch (e) {
				console.error('获取推荐仓库失败', e);
				this.recommendWarehouses = [];
			}
		},
		onBannerChange(index) {
			this.bannerCurrentIndex = index
		},
		onBannerLoaded() { },
		onBannerError(e) {
			console.error('Banner 加载失败', e)
		},
		formatArea(value) {
			const num = Number(value || 0)
			if (!num) return '0m²'
			if (num >= 100000) {
				const wan = num / 10000
				return `${this.toFixedSafe(wan, 0)}万m²`
			}
			return `${this.toFixedSafe(num, 0)}m²`
		},
		toFixedSafe(n, d) {
			const m = Math.pow(10, d)
			return (Math.round(n * m) / m).toFixed(d)
		},
		sharePoster() {
			this.showPosterModal = true
		},
		viewWarehouses() {
			const id = this.park.parkId
			if (!id) return uni.showToast({ title: '暂无园区ID', icon: 'none' })
			
			// 跳转到仓库列表页面，并传递parkId参数
			uni.navigateTo({
				url: `/pages/warehouse/warehouseList?parkId=${id}`
			});
		},
		contactUs() {
			const phone = this.park.contactPhone || this.park.phone || (this.park.contact && this.park.contact.phone)
			if (phone) {
				uni.makePhoneCall({ phoneNumber: String(phone) })
			} else {
				uni.showToast({ title: '暂无联系电话', icon: 'none' })
			}
		},
		
		// 查看仓库详情
		viewWarehouseDetail(warehouse) {
			const warehouseId = warehouse.warehouseId || warehouse.id;
			if (!warehouseId) {
				uni.showToast({ title: '仓库ID不存在', icon: 'none' });
				return;
			}
			
			// 跳转到仓库详情页面
			uni.navigateTo({
				url: `/pages/warehouse/warehouseDetail?warehouseId=${warehouseId}`
			});
		},
		
		// 从海报弹窗处理预约
		handleBookFromPoster() {
			// 跳转到预约页面或显示预约表单
			uni.showToast({
				title: '请选择具体仓库进行预约',
				icon: 'none'
			})
		},
		
		// 海报保存成功
		handlePosterSaved() {
			uni.showToast({
				title: '海报已保存到相册',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="less" scoped>
.park-detail-container {
	background: #ffffff;
	min-height: 100vh;
	padding: 0rpx 0rpx 200rpx 0rpx;
}

.uni-card {
	padding: 0rpx !important;

	:deep(.uni-card__content) {
		padding: 0rpx !important;
	}
}

.card {
	background: #ffffff;
	border-radius: 16rpx;
	margin: 24rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
}

.park-price-tip {
	font-size: 22rpx;
	color: #3f3f3f;
}

.section-title {
	font-size: 32rpx;
	font-weight: 800;
	color: #222;
}

/* 介绍头部 */
.intro-header {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}

.intro-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.park-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #3f3f3f;
}

.park-price {
	color: #C02C38;
	font-weight: 800;
	font-size: 32rpx;
}

.intro-tags {
	display: flex;
	gap: 16rpx;
	margin-top: 8rpx;
	flex-wrap: wrap;
}

.intro-tag {
	padding: 0rpx 24rpx;
	border-radius: 999rpx;
	background: #ffffff;
	color: #C02C38;
	font-size: 20rpx;
	border: 1rpx solid #C02C38;
}

.intro-block {
	margin-top: 12rpx;
}

.intro-block-title {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-weight: 800;
	color: #222;
	margin-bottom: 8rpx;
}

.intro-block-icon {
	width: 28rpx;
	height: 28rpx;
}

.intro-block-content {
	line-height: 1.8;
	color: #3f3f3f;
	font-size: 24rpx;
}

.intro-text {
	margin-top: 16rpx;
	line-height: 1.7;
	color: #333;
	font-size: 26rpx;
}

.metrics-grid {
	margin-top: 20rpx;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16rpx;
}

.metrics-grid-large {
	margin-top: 12rpx;
}

.metric-item {
	background: #fff;
	border: 2rpx solid #eee;
	border-radius: 16rpx;
	padding: 20rpx;
	align-items: center;
	justify-content: center;
}

.metric-label {
	color: #666;
	font-size: 22rpx;
	text-align: center;
}

.metric-value {
	// margin-top: 10rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #3F3F3F;
	text-align: center;
}

.metric-value-large {
	font-size: 24rpx;
}

/* 类型 */
.type-grid {
	margin-top: 20rpx;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.type-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.type-icon-box {
	width: 160rpx;
	height: 160rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.type-icon-inner {
	width: 120rpx;
	height: 120rpx;
	background-image: url('/static/assets/park/park-icon-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.type-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
}

.type-name {
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #333;
}

/* 硬件配置 */
.specs-grid {
	margin-top: 20rpx;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
}

.spec-item {
	display: grid;
	grid-template-columns: 120rpx 1fr;
	align-items: center;
	gap: 16rpx;
}

.spec-icon-box {
	width: 120rpx;
	height: 120rpx;
	border: 2rpx dashed #e2e2e2;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spec-icon-inner {
	width: 92rpx;
	height: 92rpx;
	background-image: url('/static/assets/park/park-icon-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spec-icon {
	width: 52rpx;
	height: 52rpx;
}

.spec-label {
	font-size: 22rpx;
	color: #888;
}

.spec-value {
	margin-top: 6rpx;
	font-size: 28rpx;
	color: #222;
	font-weight: 700;
}

/* 位置 */
.map-container {
	margin-top: 16rpx;
}

.map {
	width: 100%;
	height: 360rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.address-text {
	margin-top: 12rpx;
	color: #666;
	font-size: 24rpx;
}

/* 服务 */
.service-tags {
	margin-top: 16rpx;
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.service-tag {
	padding: 10rpx 20rpx;
	border: 2rpx solid #C02C38;
	border-radius: 999rpx;
	font-size: 24rpx;
	color: #3F3F3F;
}

/* 联系 */
.contact-card {
	margin-top: 16rpx;
	border: 2rpx dashed #e5e5e5;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	gap: 20rpx;
}

.contact-top {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.contact-bottom {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.contact-avatar {
	width: 96rpx;
	height: 96rpx;
	background: #f3f3f3;
	border-radius: 50%;
}

.contact-right {
	flex: 1;
}

.contact-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #222;
}

.contact-row {
	margin-top: 8rpx;
	color: #444;
	font-size: 24rpx;
	display: flex;
}

.contact-label {
	color: #888;
	margin-right: 8rpx;
}

/* 底部操作栏 */
.action-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.06);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16rpx;
	padding: 16rpx 24rpx 80rpx;
}

.action-btn {
	height: 88rpx;
	border-radius: 12rpx;
	background: #ffffff;
	color: #C02C38FF;
	border: 2rpx solid #C02C38FF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.action-btn.primary {
	background: #C02C38;
	color: #fff;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 16rpx;
}

.card-header.header-link .link {
	color: #C02C38;
	font-size: 24rpx;
}

.addr-row {
	display: flex;
	align-items: center;
	margin-top: 8rpx;
	color: #666;
}

.addr-icon {
	margin-right: 8rpx;
	object-fit: contain !important;
}

.card-title {
	font-size: 24rpx;
	font-weight: 700;
}

/* 推荐仓库样式 */
.recommend-scroll {
	width: 100%;
	margin-top: 16rpx;
}

.recommend-list {
	display: flex;
	gap: 20rpx;
	width: max-content; /* 关键：让容器宽度适应内容 */
	padding: 0 20rpx; /* 添加左右内边距 */
}

.recommend-item {
	position: relative;
	width: 335rpx;
	height: 178rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-sizing: border-box;
	flex-shrink: 0; /* 防止压缩 */
}

.recommend-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
	font-size: 24rpx;
	font-weight: 500;
	line-height: 1.2;
	padding: 16rpx 12rpx 12rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.recommend-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recommend-price {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #C02C38;
	font-weight: 600;
}
</style>
